<template>
	<view class="container">
		<!-- navbar -->
		<u-navbar :is-back='false' :is-fixed="true" :border-bottom='false' :background="{ background: '#6EC9E1 ' }"
			:placeholder="true">
			<view class="slot-wrap">
				<image src="../../static/img/title.png" mode="widthFix"></image>
				<view class="navbar">
					<view>关注回访的生活咨询平台</view>
					<view>专业人士自己的平台</view>
				</view>
			</view>
		</u-navbar>
		<!-- main -->
		<view class="userInfo">
			<view>
				<u-avatar v-if="info" @click="goTo('/sub/center/info')" size='large' :src="info.avatar"></u-avatar>
				<view v-else class="avatar" @click="goTo('/pages/login/index')">
					<image style="width: 68px;height: 68px;" src="../../static/svg/custom.svg" mode="widthFix"></image>
					<view>登录</view>
				</view>
			</view>
			<view class="user" @click="goTo('/sub/center/info')">
				<view>
					<p>{{info.nickname}}</p>
					<p class="phone">{{info.mobile||''}}</p>
				</view>

				<view v-if="info" class="balance" @click.stop="goTo('/sub/money/money')">
					<image style="width: 13px;height: 13px;" src="../../static/icon/qianbao.png" mode="aspectFill">
					</image>
					余额
				</view>

			</view>
		</view>

		<view class="cards">

			<block v-for="(item,index) in list" :key="index">
				<button v-if="item.title.indexOf('客服')+1" open-type='contact' class="u-reset-button item">
					<view class="item-left item">
						<image :src="item.src" mode=""></image>
						<view>
							{{ item.title}}
						</view>
					</view>
					<view>
						<u-badge type="error" :absolute="false" :count="item.unread||0"></u-badge>
						<u-icon name="arrow-right" color="#c0c4cc" size="24"></u-icon>
					</view>
				</button>

				<view v-else @click="goTo(item.url)" class="item">
					<view class="item-left item">
						<image :src="item.src" mode=""></image>
						<view>
							{{ item.title}}
						</view>
					</view>
					<view>
						<u-badge type="error" :absolute="false" :count="item.unread||0"></u-badge>
						<u-icon name="arrow-right" color="#c0c4cc" size="24"></u-icon>
					</view>
				</view>
			</block>
		</view>
		<!--bto -->
		<view class="bto">专业人士在线 | 业余咨询 | 专业回访 | 定时解答</view>


		<u-toast ref="uToast" />

	</view>
</template>

<script>
	import {
		kfindex
	} from '@/api/index.js'
	export default {
		data() {
			return {
				info: '',
				TODOCount: 0,
				collectionCount: 0,
				logoutShow: false,
				kf: '',
				list: [{
						title: '我的邀请码',
						url: '/sub/center/mine/myCode',
						src: '../../static/svg/mine/myCode.svg'
					},
					{
						title: '我的成员列表',
						url: '/sub/center/mine/member',
						src: '../../static/svg/mine/chengyuan.svg'
					},
					{
						title: '我的保驾护航员',
						url: '/sub/center/mine/umbrella',
						src: '../../static/svg/mine/umbrella.svg'
					},
					{
						title: '我收到的回访问卷',
						url: '/sub/center/mine/huifang',
						src: '../../static/svg/mine/huifang.svg',
					},
					{
						title: '我发送的咨询问卷',
						url: '/sub/center/mine/zixun',
						src: '../../static/svg/mine/zixun.svg',
					},
					{
						title: '个人笔记',
						url: '/sub/center/mine/note',
						src: '../../static/svg/mine/biji.svg'
					},
					{
						title: '我的晴空万里券',
						url: '/sub/center/mine/discount',
						src: '../../static/svg/mine/discount.svg'
					},
					{
						title: '我拓展的好友数',
						url: '/sub/center/mine/expand',
						src: '../../static/svg/mine/friend.svg'
					},
					{
						title: '民间感恩赞助',
						url: '/pages/center/sponser',
						src: '../../static/svg/mine/sponser.svg'
					},
					{
						title: '联系客服',
						url: '',
						src: '../../static/svg/mine/kefu.svg'
					}
					// {
					// 	title: '设置',
					// 	//隐私设置页 center/privacy-settings
					// 	url: '/sub/center/mine/setting',
					// 	src: '../../static/svg/mine/setting.svg'
					// }
				]
			}
		},
		onLoad(e) {
			if (e.id) {
				this.ws.sid = `sid=${e.id}&type=2`
				this.ws.sid = encodeURIComponent(this.ws.sid)
				this.ws.logout()
			}
		},
		onShow: function() {

			this.info = uni.getStorageSync('userinfo'); // 防止需要在pageDataLoad使用到用户ID
			console.log(this.info, '测试');

			if (this.info) {
				this.ws.pageRefresh.message = true
				this.ws.pageRefresh.sessionInfo = true
				this.ws.init(this.info.token, this.info.auth_token)
			}
			this.ws.checkNetwork(this)
			this.ws.pageFun(this.pageDataLoad, this);
			this.init();

			// 初始化菜单  1 用户模块 2 护航员模块 
			if (this.info.job == 2) {
				this.list = [{
						title: '问卷邀请码',
						url: '/sub/center/mine/myCode',
						src: '../../static/svg/mine/myCode.svg'
					},
					{
						title: '我发出的回访问卷',
						url: '/sub/center/mine/huifang',
						src: '../../static/svg/mine/huifang.svg',
					},
					{
						title: '咨询问卷模版',
						url: '/sub/edit/index',
						src: '../../static/svg/mine/model.svg'
					},

					{
						title: '我收到的咨询问卷',
						url: '/sub/center/mine/zixun',
						src: '../../static/svg/mine/zixun.svg'
					},
					{
						title: '个人笔记',
						url: '/sub/center/mine/note',
						src: '../../static/svg/mine/biji.svg'
					},
					{
						title: '收到的支持',
						url: '/sub/center/mine/umbrella-docker',
						src: '../../static/svg/mine/ganxie.svg'
					},
					{
						title: '我的个人资质',
						url: '/sub/center/dockerInfo',
						src: '../../static/svg/mine/chengyuan.svg'
					},
					{
						title: '我提供的服务项目',
						url: '/sub/session-info/thank?id=' + this.info.id,
						src: '../../static/svg/mine/myService.svg'
					},
					{
						title: '我拓展的好友数',
						url: '/sub/center/mine/expand',
						src: '../../static/svg/mine/friend.svg'
					},
					{
						title: '民间感恩赞助',
						url: '/pages/center/sponser',
						src: '../../static/svg/mine/sponser.svg'
					},
					{
						title: '联系客服',
						url: '',
						src: '../../static/svg/mine/kefu.svg'
					}
					// {
					// 	title: '设置',
					// 	// url:'/sub/center/privacy-settings',
					// 	url: '/sub/center/mine/setting',
					// 	src: '../../static/svg/mine/setting.svg'
					// }
				]
			}
		},
		onPullDownRefresh: function() {
			this.ws.pageFun(this.pageDataLoad(true), this);
			this.ws.onMessageCallBack.set('center', (msg) => {
				if (msg.data.data.refresh) {
					this.$refs.uToast.show({
						title: '刷新成功~',
						type: 'success'
					})
					uni.stopPullDownRefresh()
				}
			})
		},
		methods: {
			goTo(url) {
				console.log(url);
				uni.navigateTo({
					url: url
				})
			},
			init() {
				kfindex().then(res => {
					if (res.code == 1) {
						this.kf = res.data.customer_session_id
						if (this.info.job == 1) {
							this.list[3].unread = res.data.num.user_follow_num
							this.list[4].unread = res.data.num.user_advice_num
						} else {
							this.list[1].unread = res.data.num.doctor_follow_num
							this.list[3].unread = res.data.num.doctor_advice_num
						}
						this.$forceUpdate()
					}
				})
			},

			pageDataLoad: function(refresh = false) {
				var that = this
				this.ws.send({
					c: 'User',
					a: 'center',
					data: {
						'id': that.info.id,
						'refresh': refresh
					}
				})
			},
			logoutConfirm: function() {
				this.logoutShow = true
			},
			logout: function() {
				var that = this
				// #ifdef APP-PLUS
				if (!this.ws.socketOpen || parseInt(that.ws.initializeData.config.uni_push_switch) == 0) {
					that.ws.logout()
				} else {
					that.ws.pushCid('logout')
				}
				// #endif

				// #ifndef APP-PLUS
				that.ws.logout()
				// #endif
			}
		}
	}
</script>

<style lang="scss">
	.slot-wrap {
		color: #FFF;
		padding-left: 30rpx;
		width: 100%;
		max-height: 44px;
		display: flex;
		align-items: flex-start;
		letter-spacing: 2px;
		font-weight: 500;

		image {
			width: 88px;
			margin-right: 20rpx;
			max-height: 44px;
		}

		.navbar {
			// height: 44px;
			// line-height: 50px;
			font-size: 8px;
		}

	}

	.avatar {
		display: flex;
		align-items: center;
		color: #fff;
		width: 50vw;

		image {
			background-color: #fff;
			border-radius: 50%;
			margin-right: 16rpx;
		}
	}

	.container {
		background-color: #fff;
		min-height: 100vh;
		font-size: 16px;

		.bto {
			position: relative;
			top: -40px;
			color: #999999;
			font-size: 24rpx;
			text-align: center;
		}

		.userInfo {
			background-color: #6EC9E1;
			display: flex;
			align-items: center;
			padding: 40rpx;
			padding-bottom: 80px;

			.user {
				margin-left: 20rpx;
				display: inherit;
				justify-content: space-between;
				color: #fff;
				width: 100%;

				.phone {
					margin-top: 10rpx;
				}
			}

			.balance {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 74.64px;
				height: 30px;
				font-size: 14px;
				border-radius: 156px;
				background: rgba(255, 255, 255, 0.2);
				color: fff;

				image {
					margin-right: 10rpx;
				}
			}
		}

		.cards {
			border-radius: 30rpx;
			position: relative;
			top: -40px;
			padding: 20rpx 40rpx;
			letter-spacing: 2px;
			min-height: 50vh;
			background-color: #fff;

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;

				image {
					width: 36px;
					height: 36px;
					margin-right: 20rpx;
				}

				.item-left {
					margin: 20rpx 0;
					font-family: PingFang SC;
				}

			}
		}
	}
</style>